<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="user-scalable=0" />
	<!--阻止双击放大页面-->
	<title>时租房源详情</title>
</head>
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<link rel="stylesheet" href="../css/style.css" />
<link rel="stylesheet" href="../css/longrentpage.css" />
<link rel="stylesheet" href="../css/longparticulars.css" />
<link rel="stylesheet" href="../css/vue-swipe.css">
<link rel="stylesheet" href="../css/swipe.css">
<!--长租首页css样式-->
<link rel="stylesheet" href="../css/dailyparticulars.css" />
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/xSlider.js"></script>
<!--轮播-->
<script src="../js/api.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/vue/vue.js"></script>
<script type="text/javascript" src="../js/vue/vue-resource.js"></script>
<script src="http://webapi.amap.com/maps?v=1.3&key=0628edc330aaffeddfc2cba71352bcd5"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<script src="../js/vue-swipe.js"></script>

<body>
	<div class="row" style="margin: 0px;" id="app">
		<div class="col-xs-12 homepage-top ">
			<div class="col-xs-6">
				<div class="hp-top-left">
					<img src="../img/waplogo.png" />
				</div>
			</div>
			<div class="col-xs-6 hp-top-right">
				<button>立即打开</button>
				<span>
					<img src="../img/delete.png" />
				</span>
			</div>
		</div>
		<swipe class="my-swipe" v-bind:speed="800">
			<swipe-item class="slide1" v-for="imgItem in imgList">
				<img v-bind:src="imgItem.imgUrl" alt="" @click="imgclick(imgItem)">
			</swipe-item>
		</swipe>
		<div id="price">¥
			<span>{{ carouseldata.prices }}</span>/晚</div>
		<div class="col-xs-12" style="padding: 10px 15px;">
			<div v-if="tags==''" class="col-xs-12">
				<span class="long-title">{{carouseldata.title}}</span>
			</div>
			<div v-if="tags!=''" class="col-xs-12">
				<span class="long-title">{{carouseldata.title}}</span>
				<span class="houselist-span1" v-for="tagsitem in tags">{{tagsitem}}</span>
			</div>
		</div>
		<div class="col-xs-12  long-rooms">
			<div class="col-xs-3">
				<span>
					<img src="../img/rooms.png" />
				</span>
				<span v-if="carouseldata.houseRent==1">民宿套房 </span>
				<span v-if="carouseldata.roomRent==1">人民单间 </span>
				<span v-if="carouseldata.bedRental==1">青年床位 </span>
				<span class="line"></span>
			</div>
			<div class="col-xs-3">
				<span>
					<img src="../img/hall.png" />
				</span>
				<span>{{carouseldata.room}}室{{carouseldata.hall}}厅{{carouseldata.toilet}}卫</span>
				<span class="line"></span>
			</div>
			<div class="col-xs-3">
				<span>
					<img src="../img/livable.png" />
				</span>
				<span>宜居{{carouseldata.personNumber}}人</span>
				<span class="line"></span>
			</div>
			<div class="col-xs-3">
				<span>
					<img src="../img/bed.png" />
				</span>
				<span v-if="carouseldata.houseRent==1" data-toggle="modal" data-target="#myModal">床{{carouseldata.bedsList.lenght}}张
					<img src="../img/sigh.png" />
				</span>
				<span v-if="carouseldata.roomRent==1" data-toggle="modal" data-target="#myModal">床3张
					<img src="../img/sigh.png" />
				</span>
				<span v-if="carouseldata.bedRental==1" data-toggle="modal" data-target="#myModal">床{{bedsList.length}}张
					<img src="../img/sigh.png" />
				</span>

			</div>
		</div>
		<div class="col-xs-12 installment">
			<span class="headportrait">
				<img v-bind:src="carouseldata.houseMastartImgUrl" />
			</span>
			<p style="margin-top: 25px;">{{carouseldata.nick}}</p>
			<p class="certification">实名认证 • 芝麻信用750分</p>
		</div>
		<div class="col-xs-12 long-adress" style="border-bottom: 1px solid #d4d4d4;">
			<div class="col-xs-6 long-prices">
				<span class="long-houseadress">平台保障</span>
			</div>
			<div class="col-xs-6 long-report">
				<span>
					<img src="../img/report.png" />
				</span>
				<span>举报</span>
			</div>
			<div class="col-xs-4 safeguard">
				<div class="col-xs-5" style="line-height: 105px">
					<img src="../img/reality.png" />
				</div>
				<div class="col-xs-7">
					<p>真实房源
						<br/>
						<p>人工审核</p>
				</div>
			</div>
			<div class="col-xs-4 safeguard">
				<div class="col-xs-5" style="line-height: 105px">
					<img src="../img/creditable.png" />
				</div>
				<div class="col-xs-7">
					<p>房东实名</p>
					<p>更加可靠</p>
				</div>
			</div>
			<div class="col-xs-4 safeguard">
				<div class="col-xs-5" style="line-height: 105px">
					<img src="../img/safeguard.png" />
				</div>
				<div class="col-xs-7">
					<p>在线支付</p>
					<p>方便快捷</p>
				</div>
			</div>
		</div>
		<div class="col-xs-12 long-adress" style="border-bottom: 1px solid #d4d4d4;">
			<span class="long-houseadress">房源描述</span>
			<span>
				<span style="color: #7d7d7d;" class="readmore" id="readmore">
					{{carouseldata.houseDesc}}
				</span>
			</span>
			<span class="long-more More" onclick="more()">阅读更多</span>
			<span class="long-more Packup" style="display: none;" onclick="packup()">点击收起</span>
		</div>
		<div class="col-xs-12 long-adress">
			<span class="long-houseadress">房源位置</span>

		</div>
		<div class="col-xs-12 long-map">
			<span class="map-daily">
				<div id="container" style="width: 100%;height: 100%;"></div>
			</span>
			<span class="daily-position">
				<span>
					<img src="../img/ditu1.png" style="padding: 0px 17px 0px 0px;" />{{carouseldata.cityName}}{{carouseldata.areaName}}{{carouseldata.address}}</span>
				<span style="float: right;">去这里</span>
			</span>
		</div>
		<div class="long-adress">
			<span class="long-houseadress">配套设施</span>
		</div>
		<div class="col-xs-12 long-adress amenities" style="border-bottom: 1px solid #d4d4d4;">
			<div class="long-label" v-for=" amenityIditem in amenityId">
				<span>
					<img v-if="amenityIditem.grayIcon==' '" src="../img/headportrait.png" />
					<img v-if="amenityIditem.grayIcon!=' '" v-bind:src="amenityIditem.grayIcon" />
				</span>
				<span>{{amenityIditem.amenityName}}</span>
			</div>
		</div>
		<!-- <div class="col-xs-12 long-adress" style="border-bottom: 1px solid #d4d4d4;">
			<span class="long-houseadress">租房日历</span>

		</div> -->
		<!-- <div class="col-xs-12 long-adress" style="border-bottom: 1px solid #d4d4d4;">
			<div class="col-xs-6 long-prices">
				<span class="long-houseadress">床位信息</span>
			</div>
			<div class="col-xs-12" v-for="bedsItem in bedsList" style="font-size: 35px;text-align: center;">
				<div class="col-xs-4 daily-rule">
					<span style="text-align: left;">{{bedsItem.bedsNo}}床</span>
				</div>
				<div class="col-xs-4 daily-rule1">
					<span style="color: #e25051;">{{bedsItem.bedsPrices}}元/晚</span>
				</div>
				<div class="col-xs-4 daily-rule1">
					<span style="text-align: right;" data-toggle="modal" data-target="#myModalImg">查看图片</span>
				</div>
			</div>
		</div> -->

		<div class="col-xs-12 long-adress">
			<div class="col-xs-6 long-prices">
				<span class="long-houseadress">交易规则</span>
			</div>
		</div>
		<div class="col-xs-12 rule">
			<div class="col-xs-6 daily-rule">
				<span>入住天数</span>
			</div>
			<div class="col-xs-6 daily-rule1">
				<span>最少入住{{carouseldata.shortest}}天,最多入住{{carouseldata.longest}}天</span>
			</div>
		</div>
		<div class="col-xs-12 rule">
			<div class="col-xs-6 daily-rule">
				<span>在线交易金额</span>
			</div>
			<div class="col-xs-6 daily-rule1">
				<span>订单确认后在线支付100%的房款作为定金</span>
			</div>
		</div>
		<div class="col-xs-12 rule">
			<div class="col-xs-6 daily-rule">
				<span>押金
					<!-- <img src="../img/sigh.png" style="margin-left: 10px;" /> -->
				</span>
			</div>
			<div class="col-xs-6 daily-rule1" v-if="carouseldata.serverPrices===0">
				<span>在线收取押金，芝麻信用免押200元</span>
			</div>
		</div>
		<div class="col-xs-12 rule" v-if="carouseldata.otherfees!=null">
			<div class="col-xs-6 daily-rule">
				<span>其他费用</span>
			</div>
			<div class="col-xs-6 daily-rule1">
				<span>{{carouseldata.otherfees}}</span>
			</div>
		</div>
		<div class="col-xs-12 rule" v-if="carouseldata.notice!=''">
			<div class="col-xs-6 daily-rule">
				<span>入住须知</span>
			</div>
			<div class="col-xs-6 daily-rule1">
				<span>{{carouseldata.notice}}</span>
			</div>
		</div>
		<!-- <div class="col-xs-12 rule" v-if="carouseldata.notice==''">
			<div class="col-xs-6 daily-rule">
				<span>入住须知</span>
			</div>
			<div class="col-xs-6 daily-rule1">
				<span>{{carouseldata.notice}}</span>
			</div>
		</div> -->
		<div class="col-xs-12 rule" style="padding-bottom: 20px;border-bottom: 1px solid #ddd;">
			<div class="col-xs-6 daily-rule">
				<span>退订规则</span>
			</div>
			<div class="col-xs-6 daily-rule1" style="text-align: right;color:#e25051;">
				<span @click="textview()">查看更多
					<img src="../img/pay.png" style="margin-left: 20px;" />
				</span>
			</div>
		</div>
		<!-- <div class="col-xs-12 long-adress" style="border-bottom: 1px solid #d4d4d4;padding: 40px 15px 40px 30px;">
			<div class="col-xs-6 long-prices">
				<span class="long-houseadress">房客点评</span>
			</div>
			<div class="col-xs-6 long-report">
				<span>查看全部评论</span>
				<span>
					<img src="../img/pay.png" style="margin-left: 20px;" />
				</span>

			</div>
		</div> -->
		<div class="col-xs-12 long-adress" style="padding-bottom: 0px" v-show="otherList">
			<div class="col-xs-6 long-prices">
				<span class="long-houseadress">推荐房源</span>
			</div>
		</div>
		<div class="col-xs-12 Dailyrent" style="margin-bottom: 117px;">
			<div class="wrapper">
				<div class="swiper-container">
					<ul class="swiper-wrapper">
						<li class="swiper-slide" v-for="other in otherList" @click="getHouse(other)">
							<span>
								<img v-bind:src="other.imgUrl" />
							</span>
							<span class="Dailyrent-price">¥
								<span style="font-size: 55px;display: initial;">{{other.prices}}</span>/月</span>
							<span class="Dailyrent-title">
								{{other.title}}
							</span>
							<span class="information">
								<span v-if="other.longJoinRent==1">单间出租</span>
								<span v-if="other.longHouseRent==1">整间出租 | </span>
								<span>{{other.room}}室</span>
								<span>{{other.hall}}厅</span>
								<span>{{other.toilet}}卫 | 宜居</span>
								<span>{{other.personNumber}}人 |</span>
								<span>{{other.centiare}}m²</span>
							</span>
							<span class="live-action">
								<span>{{other.tags.replace(/,/g, " | ")}}</span>
							</span>
						</li>
						<div style="clear: both;"></div>
					</ul>
				</div>
			</div>
		</div>
		<div class="col-xs-12 contact" onclick="document.location.href= '../else/download.html'">
			<div class="col-xs-7 contact-left" style="text-align: left; padding-left: 50px;background: #fff;color: #e25051;">金额：{{carouseldata.prices}}元</div>
			<div class="col-xs-5 contact-right">
				<img src="../img/reserve.png" />申请预订</div>
		</div>
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document" style="width: 870px;height: 900px;margin-top: 40%;">
				<div class="modal-content" style="width: 100%;height: 100%;">
					<div class="modal-header" style="padding: 25px;text-align: center;background: #f1f1f1;">
						<h4 class="modal-title" id="myModalLabel" style="font-size: 40px;">床铺详情</h4>
					</div>
					<div class="modal-body" style="height: 680px;overflow-y: scroll;">
						<div class="col-xs-12" style="text-align: center;font-size: 40px;padding: 20px 0px;" v-for="bedsItem in bedsList">
							<div class="col-xs-4">
								{{bedsItem.bedsName}}
							</div>
							<div class="col-xs-4">
								{{bedsItem.bedsSize}}
							</div>
							<div class="col-xs-4">
								<span v-if=""></span>
								<span v-if="carouseldata.houseRent==1">{{bedsItem.bedsNumber}}</span>
								<span v-if="carouseldata.roomRent==1">{{bedsItem.bedsNumber}}</span>
								<span v-if="carouseldata.bedRental==1">1</span>
							</div>
						</div>
						<div style="clear: both;"></div>
					</div>
					<div class="modal-footer" style="    position: absolute;bottom: 0;width: 100%;padding: 30px;">
						<span data-dismiss="modal" style="    font-size: 35px;color: #dc1818;text-align: center;display: block;">我知道了</span>
					</div>
				</div>
			</div>
		</div>
		<div class="modal fade" id="myModalImg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document" style="width: 720px;height: 447px;margin-top: 60%;">
				<div class="modal-content" style="width: 100%;height: 100%;">
					<div class="modal-body" style="height: 100%;padding: 0px;">
						<div id="myCarousel1" class="carousel slide">
							<!-- 轮播（Carousel）项目 -->
							<div class="carousel-inner" v-if="index==0" v-for="(bedsItem,index) in bedsList">
								<div class="item" v-bind:class="{'active':!key}" v-for="(bedsImgUrlItem,key) in bedsItem.bedsImgUrlList">
									<img v-bind:src="bedsImgUrlItem.imgUrl">
								</div>
							</div>
							<!-- 轮播（Carousel）导航 -->
							<a class="carousel-control left" href="#myCarousel1" data-slide="prev"></a>
							<a class="carousel-control right" href="#myCarousel1" data-slide="next"></a>
						</div>
					</div>

				</div>
			</div>
		</div>
	</div>

</body>
<script type="text/javascript">
	function more() {
		$('#readmore').removeClass("readmore");
		$('.More').hide();
		$('.Packup').show();
	}

	function packup() {
		$('#readmore').addClass("readmore");
		$('.More').show();
		$('.Packup').hide();
	}

	function GetQueryString(name) {
		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
		var r = window.location.search.substr(1).match(reg);
		if (r != null) return unescape(r[2]);
		return null;
	}
	var houseid = GetQueryString("houseId");

	console.log(houseid)
	var lng = GetQueryString("lng");
	var lat = GetQueryString("lat");
	var data = {
		houseId: houseid,
		source: 'web',
		lat: '0',
		lng: '0'
	};
	var data2 = {
		cityId: "500100",
		source: "web",
		houseType: "3"
	}

	var vueSwipe = VueSwipe.Swipe;
	var vueSwipeItem = VueSwipe.SwipeItem
	var demo = new Vue({
		el: '#app',
		data: {
			imgList: [],
			carouseldata: [],
			tags: [],
			amenityId: [],
			houseList: [],
			bedsList: [],
			bedsImgUrlList: [],
			otherList: null,
			url: 'https://apis.zhudd.com/v3/house/getInfo'
		},
		created: function () {
			this.getImg(); //定义方法
			this.getOther()
		},
		methods: {
			getOther: function () {
				this.$http.jsonp({
					data: data2,
					method: "POST",
					url: url.getRecommend,
					emulateJSON: true
				}).then(function (res) {
					demo.otherList = res.data.result.houseList
				})
			},
			getHouse: function (other) {
				console.log(other.houseId);
				location.href = 'Longrent/longparticulars.html?' + 'houseId=' + encodeURI(other.houseId) +
					'&lng=' + encodeURI(other.lng) + '&lat=' + encodeURI(other.lat);
			},
			getImg: function () {
				var that = this;
				that.$http.jsonp({ //调用接口
					data: data,
					method: 'POST',
					url: this.url, //this指data
					emulateJSON: true,
				}).then(function (response) { //接口返回数据
					carouseldata = response.data.result;
					//							columndata = response.data.result.column;
					imgList = carouseldata.houseImgUrlList;
					tags = carouseldata.tags.split(',')
					amenityId = carouseldata.amenityIdList
					houseList = carouseldata.houseList
					bedsList = carouseldata.bedsList
					bedsImgUrlList = bedsList.bedsImgUrlList
					demo.carouseldata = carouseldata;
					//房源图片
					demo.imgList = imgList;
					//特色标签
					demo.tags = tags;
					//配套设施
					demo.amenityId = amenityId;
					//室友信息
					demo.houseList = houseList;
					demo.bedsList = bedsList;
					demo.bedsImgUrlList = bedsImgUrlList;
					console.log(carouseldata.notice)
					console.log(JSON.stringify(imgList))
					$(".homepage-top").next().css("margin-top", 120)
					$(".homepage-top .hp-top-right span").on("click", function () {
						$(".homepage-top").css("display", "none")
						$(".homepage-top").next().css("margin-top", 0)
						$("#float").css("top", 0)
					})
				}, function (error) {

				})
			},
			textview: function () {
				location.href = 'transact.html?' + 'houseId=' + encodeURI(houseid);
			}
		},
		components: {
			'swipe': vueSwipe,
			'swipe-item': vueSwipeItem
		}
	})
	//定位
	var marker, map = new AMap.Map("container", {
		resizeEnable: true,
		center: [lng, lat],
		zoom: 13
	});
	addMarker();
	// 实例化点标记
	function addMarker() {
		if (marker) {
			return;
		}
		marker = new AMap.Marker({
			icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
			position: [lng, lat]
		});
		marker.setMap(map);
	}
</script>
<script src="../js/downApp.js"></script>

</html>